<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8">
    <title>课程管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="/js/jquery-3.7.1.min.js"></script>
    <style>
        .queryBox{
            display: flex;
            margin: 10px 0;
            border-radius: 10px;
            border: solid 1px #aaaaaa;
            padding: 10px;
        }

        /* 全局样式 */
        body {
            font-family: 'Arial', sans-serif;
            background-color: #f4f4f4; /* 背景颜色 */
            margin: 0;
            padding: 20px;
        }
        
    </style>


</head>

<body>
<div style="padding: 16px;">
    <div class="layui-col-md12" >
        <div class="layui-card">
            <h1  style="color: black;font-size: 16px;padding: 20px">课程信息管理</h1>
            <div class="queryBox">
                <form   class="layui-form" id="queryForm4Score" >
                    <ul class="query-inline" style="display: flex">
                        <li class="layui-input-group">
                            <div class="layui-input-prefix" style="font-size: 14px">
                                课程编号
                            </div>
                            <input type="text" placeholder="请输入课程编号" class="layui-input" name="courseId">
                        </li>

                        <li class="layui-input-group">
                            <div class="layui-input-prefix" style="font-size: 14px">
                                课程名称
                            </div>
                            <input type="text" class="layui-input" name="courseNameFuzzy">
                        </li>

                        <li class="layui-input-group">
                            <div class="layui-input-prefix" style="font-size: 14px">
                                学生姓名
                            </div>
                            <input type="text" class="layui-input" name="nameFuzzy">
                        </li>

                        <li class="layui-input-group">
                            <button type="button" class="layui-btn lay-btn-sm layui-btn-normal "
                                    onclick="search4Score()" style="margin-left: 10px">
                                查询
                            </button>
                        </li>
<!--                        <li class="layui-input-group">-->
<!--                            <button type="button"  class="layui-btn layui-bg-red"-->
<!--                                    onclick="showImportScoreTemplate()" style="margin-left: 10px">-->
<!--                                导入成绩-->
<!--                            </button>-->
<!--                        </li>-->
                    </ul>

                </form>
            </div>
            <div class="layui-card-body">
                <table class="layui-hide" id="ScoreList" lay-filter="ScoreList"></table>
            </div>
        </div>
    </div>

    <div class="importScoreTemplate" id="importTemplate" style="display: none;margin: 10px ">
         <div>导入文件下载模板</div>
    </div>
</div>

<script type="text/html" id="scoreTemplate">
    <div class="layui-clear-space">
        <a class="layui-btn layui-btn-xs" lay-event="edit">
            保存
        </a>
    </div>
</script>

<script type="text/javascript">
    // 关闭弹出层
    const  closeeditScoreDialog=()=> {
        if (layerIndex !== undefined) {
            layer.close(layerIndex);
            layerIndex = undefined; // 重置索引值
        }
    }

    // 获取查询输入值
    function getsearch4ScoreCondition() {
        let formData={};
        // 遍历输入元素，将值存储到formData中
        $("#queryForm4Score").find('input',"select").each(function () {
            let name=$(this).attr('name'); // 获取元素的 name属性
            let type = $(this).attr('type'); // 获取元素的类型
            if (name) {
                if (type === 'radio') {
                    // 对于单选按钮，只有当它是选中状态时才添加到formData
                    if ($(this).is(':checked')) {
                        formData[name] = $(this).val(); // 获取选中单选按钮的值
                    }
                } else {
                    // 对于其他类型的输入元素，只要值不为空就添加到formData
                    let value = $(this).val();
                    if (value) {
                        formData[name] = value;
                    }
                }
            }
        });
        return formData;
    }

    function search4Score(){
        let queryData=getsearch4ScoreCondition();
        console.log(queryData);

        const table=layui.table;
        table.reloadData("ScoreList",{
            where:{data:queryData}
        });
        console.log("where condition:"+JSON.stringify(queryData));
    }


    // layui use
    layui.use(['admin','jquery','popup','table','form','tree'], function() {
        let popup = layui.popup;
        let $ = layui.jquery;
        let table=layui.table;
        let form = layui.form;
        var layer = layui.layer;
        var tree = layui.tree;
        var util = layui.util;
        var laydate = layui.laydate;


        // 1. 获取数据
        $(document).ready(function () {
            let cols4ScoreList = [
                { field: 'stuJobNo', fixed: 'left', title: '学工号'},
                { field: 'name', fixed: 'left', title: '学生姓名'},
                // { field: 'className', fixed: 'left', title: '班级名称'},
                // { field: 'majorName', fixed: 'left', title: '专业名称'},
                { field: 'courseId', fixed: 'left',  title: '课程编号'},
                { field: 'courseName', fixed: 'left', title: '课程名称'},
                // { field: 'departmentName', fixed: 'left', title: '部门名称'},
                { field: 'grade', fixed: 'left', title: '课程成绩',edit: 'text',
                    templet: d=> d.grade===null? '暂无成绩':(d.grade<60?'不及格':d.grade)},
                { fixed: 'right', title: '操作', width: 140, minWidth: 125, toolbar: '#scoreTemplate' }
            ];
            let queryData = getsearch4ScoreCondition();
            // 表格相关事件
            table.render({
                elem: '#ScoreList',
                url: '/score/loadScoreList',
                cols: [cols4ScoreList],
                method:"post",
                page: true,
                contentType:'application/json',
                where:{'data':queryData},
                limits: [10, 20, 30, 40, 50],
                limit: 10,
                height: 'full-220'
            });
            // 点击编辑事件
            table.on('tool(ScoreList)',async function (obj) {
                var  data=obj.data;
                if (obj.event ==='edit'){
                    saveScoreInfo(data,popup);
                }
            })
        });
    } );

    /**
     * 保存分数信息
     * @param data
     */
    const  saveScoreInfo=(data,popup)=>{

        let scoreId=data.id;
        let score=data.grade;
        console.log("保存分数信息:scoreId"+scoreId+",score:"+score);
        let request = $.ajax({
            url: "/score/saveScore",
            method: "GET",
            data:{
                id:scoreId,
                score:score,
            },
            dataType: "json"
        });
        request.done(function( data ) {
            if(data.code===901){ // 登录超时
                popup.warning(data.info, function () {
                    console.log(data.info);
                });
                setTimeout(function () {
                    location.href = "/login";
                }, 1500);
            }else {
               if (data.code===200){
                   popup.success("修改成绩成功");
               }else{
                   popup.warning(data.info);
               }
            }
        });

        request.fail(function( jqXHR, textStatus ) {
            console.error(jqXHR,textStatus);
        });
    }


</script>
</body>

</html>